"use client"

interface XiangxingDisplayProps {
  char: string
}

export function XiangxingDisplay({ char }: XiangxingDisplayProps) {
  const stages = [
    { stage: '甲骨文', char: char, desc: '最早的文字形式' },
    { stage: '金文', char: char, desc: '青铜器上的文字' },
    { stage: '小篆', char: char, desc: '秦朝统一文字' },
    { stage: '楷书', char: char, desc: '现代标准写法' }
  ]

  return (
    <div className="w-full h-full bg-gradient-to-br from-yellow-100 via-orange-100 to-orange-200 p-6 relative overflow-hidden flex flex-col">
      {/* 标题 */}
      <h2 className="text-3xl font-black text-center mb-6 text-gray-800 drop-shadow-lg">
        "{char}"字的演变历程
      </h2>

      {/* 演变阶段 */}
      <div className="flex-1 grid grid-cols-4 gap-4 items-center">
        {stages.map((item, index) => (
          <div
            key={item.stage}
            className="text-center bg-white p-4 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 hover:transform hover:-translate-y-2 h-full flex flex-col justify-center relative overflow-hidden"
          >
            {/* 顶部装饰条 */}
            <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-red-400 via-yellow-400 to-blue-400 transform scale-x-0 hover:scale-x-100 transition-transform duration-300"></div>
            
            {/* 字符 */}
            <div className="text-6xl mb-3 text-gray-800 min-h-[80px] flex items-center justify-center font-bold">
              {item.char}
            </div>
            
            {/* 阶段名称 */}
            <div className="text-xl font-bold text-red-500 mb-2">
              {item.stage}
            </div>
            
            {/* 描述 */}
            <div className="text-gray-600 text-sm">
              {item.desc}
            </div>
          </div>
        ))}
      </div>

      {/* 字源故事 */}
      <div className="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg">
        <h3 className="text-xl font-bold text-red-500 mb-3 flex items-center gap-2">
          📜 字源故事
        </h3>
        <p className="text-base leading-relaxed text-gray-700">
          "{char}"字是象形字，古人观察树木的形状，用简单的线条勾勒出树的轮廓，逐渐演变成今天的"{char}"字。
        </p>
      </div>
    </div>
  )
} 